<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-4">
		<a-form ref="searchFormRef" :model="searchFormState">
			<a-row :gutter="[24, 2]">
				<a-col :span="6">
					<!--name表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
					<a-form-item label="名称" name="name">
						<a-input v-model:value="searchFormState.name" placeholder="请输入名称"></a-input>
					</a-form-item>
				</a-col>
				<template v-if="advanced">
					<a-col :span="6">
						<a-form-item label="编码" name="code">
							<a-input v-model:value="searchFormState.code" placeholder="请输入编码" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="状态" name="state">
							<a-select
								:allowClear="true"
								v-model:value="searchFormState.state"
								placeholder="请选择状态"
								:fieldNames="{ label: 'name', value: 'code', options: 'options' }"
								:options="simpleStateDic"
							/>
						</a-form-item>
					</a-col>
				</template>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<!--a 开头的标签都是ant design vue ui的组件-->
	<a-card :bordered="false">
		<s-table
			ref="table"
			@resizeColumn="
				(w, col) => {
					col.width = w
				}
			"
			:bordered="true"
			:tool-config="{ refresh: true, height: true, columnSetting: true, striped: true }"
			:row-selection="{
				onChange: (selectedRowKey, selectedRows) => {
					selectedRowKeys = selectedRowKey
				}
			}"
			:alert="true"
			:columns="columns"
			:data="loadData"
			:row-key="(record) => record.id"
		>
			<template #operator v-if="hasPerm(['bizSimpleAdd', 'bizSimpleBatchDelete'])">
				<a-space>
					<a-button type="primary" v-if="hasPerm('bizSimpleAdd')" @click="form.onOpen()">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
					<a-button danger v-if="hasPerm('bizSimpleBatchDelete')">删除</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'state'">
					<a-tag
						:color="record.state === simpleState.NORMAL ? 'green' : record.state === simpleState.FREEZE ? 'pink' : null"
					>
						{{
							$utils.find(simpleStateDic, (item) => item.code === record.state)
								? $utils.find(simpleStateDic, (item) => item.code === record.state).name
								: '当前状态不存在'
						}}
					</a-tag>
				</template>

				<template v-if="column.dataIndex === 'type'">
					<a-tag> {{ $TOOL.dictTypeData('BIZ_TYPE', record.type) }} </a-tag>
				</template>

				<template v-if="column.dataIndex === 'action'">
					<a v-if="hasPerm('bizSimpleEdit')" @click="form.onOpen(record)">编辑</a>
					<a-divider type="vertical" v-if="hasPerm(['bizSimpleEdit', 'bizSimpleDelete'], 'and')" />
					<a-popconfirm title="删除此数据吗？">
						<a-button type="link" danger size="small" v-if="hasPerm('bizSimpleDelete')">删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</s-table>
	</a-card>

	<Form ref="form" @successful="table.refresh(true)" />
</template>

<script setup name="bizSimple">
	import Form from './form.vue'
	import { message } from 'ant-design-vue'
	import simpleApi from '@/api/biz/bizSimpleApi'
	import { SIMPLE_STATE_DIC, SIMPLE_STATE } from './simpleConst'
	let searchFormState = reactive({})
	// 1. 先定义一个空的响应式数据(ref 定义的或reactive)
	// 2 setup中返回定义的数据，需要获取哪个 dom 元素，就在对应元素上使用 ref 属性绑定该数据即可
	const searchFormRef = ref()
	const table = ref()
	let form = ref()
	// 状态常量
	const simpleStateDic = SIMPLE_STATE_DIC
	const simpleState = SIMPLE_STATE
	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}

	const columns = [
		{
			title: '排序',
			dataIndex: 'sort',
			sorter: true,
			width: 100,
			resizable: true
		},
		{
			title: '名称',
			dataIndex: 'name',
			sorter: true,
			ellipsis: true,
			width: 200,
			resizable: true
		},
		// {
		// 	title: '编码',
		// 	dataIndex: 'code',
		// 	sorter: true,
		// 	ellipsis: true,
		// 	width: 200,
		// 	resizable: true
		// },
		{
			title: '状态',
			dataIndex: 'state',
			sorter: true,
			ellipsis: true,
			width: 100,
			resizable: true
		},
		// {
		// 	title: '类型',
		// 	dataIndex: 'type',
		// 	ellipsis: true,
		// 	width: 200,
		// 	resizable: true
		// },
		{
			title: '机构',
			dataIndex: 'orgId',
			ellipsis: true,
			sorter: true,
			width: 200,
			resizable: true
		},
		{
			title: '机构名称',
			dataIndex: 'orgName',
			ellipsis: true,
			sorter: true,
			width: 200,
			resizable: true
		},
		// {
		// 	title: '备注',
		// 	dataIndex: 'remark',
		// 	ellipsis: true,
		// 	width: 200,
		// 	resizable: true
		// },
		// {
		// 	title: '创建时间',
		// 	dataIndex: 'createTime',
		// 	ellipsis: true,
		// 	sorter: true,
		// 	width: 200,
		// 	resizable: true
		// },
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 200,
			fixed: 'right'
		}
	]
	const loadData = (parameter) => {
		Object.assign(parameter, searchFormState)
		if (parameter.sortField === 'orgName') {
			parameter.sortField = 'orgId'
		}
		console.log(parameter)
		return simpleApi.bizSimplePage(parameter).then((res) => {
			return res
		})
	}

	const selectedRowKeys = ref([])
</script>

<style scoped></style>
